<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <part-child></part-child>
        <button @click="msg='和田玉玉镯'">修改传家宝</button>
    </div>
</body>

</html>
<script>

    //  实现多层组件嵌套传参
    //  让祖先组件提供一个依赖, 使用provide(){return {数据}} , provide提供的数据就是后代组件主要注入的数据
    //  在当前需要数据的后代组件中,使用inject:[数据],该数据是父组件提供的数据,这样该数据就被添加到了该后代组件的实例上了

    // 注意: 默认数据非响应式的数据,需要使用compouted 方法数据变成响应式的数据,这样后代每次都
    // 可以获取更新后的数据
    const { createApp, computed } = Vue;
    const app = createApp({
        data() {
            return {
                msg: '传家宝'
            }
        },
        // 定义祖先组件中提供的数据,需要注入的依赖
        provide() {
            return {
                msg: computed(() => this.msg),
                /// 其他数据
            }
        },
        methods: {

        },
        components: {
            partChild: {
                template: `
                    <div>
                       <p>我是局部组件</p>
                       <part1></part1>
                    </div>
                   `,
                data() {
                    return {
                        msg: "我是局部父组件"
                    }
                },
                components: {
                    part1: {
                        template: `<p>我是局部子组件1--{{num}}--{{msg}}</p>`,
                        data() {
                            return {
                                num: 10
                            }
                        },
                        inject: ['msg'],
                        mounted() {
                            console.log(this);
                        }
                    }
                }
            }
        }
    })
    // 解决控制台的警告
    app.config.unwrapInjectedRef = true
    app.mount('#app')
</script>